<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>欢迎页面-L-admin1.0</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <link rel="shortcut icon" href="/static/favicon.ico" type="image/x-icon"/>
    <link rel="stylesheet" href="/static/css/font.css">
    <link rel="stylesheet" href="/static/css/xadmin.css">
    <script src="/static/js/jquery.min.js"></script>
    <script type="text/javascript" src="/static/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="/static/js/xadmin.js"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
        .add-btn {
            float: right;
            background-color: #6adceb;
            color: #fff;
            font-size: 20px;
            text-align: center;
            height: 15px;
            line-height: 15px;
            border-radius: 15px;
            padding: 15px
        }
        .add-btn:hover {
            font-size: 22px;
            background-color: #15ff00;
            color: #fff;
        }
        #keyword-tbody tr td input{
            width: 100%;
            height: 30px;
            line-height: 30px;
            border: 1px solid #f1f1f1;
            background-color: #eee;
            color: #333;
        }
    </style>
</head>
<body>
<div class="x-body">
    <form action="" method="post">
        <div class="layui-form-item" style="width: 100%;">
            <table id="myTable" class="layui-table">
                <caption>网站列表</caption>
                <thead>
                <tr>
                    <th>域名</th>
                    <th>别称</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody id="keyword-tbody">
                {volist name="list" id="value" key="key"}
                <tr id="row{$key}">
                    <td><input name="website[website][]" value="{$value.website}"></td>
                    <td><input name="website[name][]" value="{$value.name}"></td>
                    <td><a href="javascript:javascript:hideRow({$key});">删除</a></td>
                </tr>
                {/volist}
                </tbody>
                <tfoot>
                <tr>
                    <td colspan="5">
                        <a class="add-btn" href="javascript:addRow();">添加行</a>
                    </td>
                </tr>
                </tfoot>
            </table>
        </div>
        <div class="layui-form-item">
            <label for="L_repass" class="layui-form-label">
            </label>
            <input type="submit" class="layui-btn" value="确定">
        </div>
    </form>
</div>

</div>
<script>
    function addRow() {
        let tbody = document.getElementById('keyword-tbody'),
            trs = tbody.getElementsByTagName('tr'),
            string = '<td><input name="website[website][]"></td><td><input name="website[name][]"></td>';
        tr = document.createElement('tr');
        tr.id = 'row' + (trs.length + 1);
        tr.innerHTML = string + '<td><a href="javascript:javascript:hideRow(' + (trs.length + 1) + ');">删除</a></td>';
        tbody.appendChild(tr);
    }

    function hideRow(id) {
        let tr = document.getElementById('row' + id);
        tr.style = 'display:none';
        tr.innerHTML = '';
        $.ajax({
            url:'/admin/monitor/website',
            type: 'post', // 请求类型，可以是 'GET' 或 'POST'  
            data:data,
            dataType: 'json', // 预期服务器返回的数据类型  
            success: function(res) {
                
            }
        });
    }
</script>
</body>
</html>